<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奇思妙想后台管理系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">
        <h2 class="title">奇思妙想后台管理系统</h2>
    </header>
    <div class="boxwarrp">
        <section class="contentwarrp">
            <header class="content-header">
                <ul class="header-addess myclear">
                    <li><a href="#">当前位置：首页</a></li>
                    <li>></li>
                    <li><a href="#">信息管理</a></li>
                    <li>></li>
                    <li><a href="#">人员信息</a></li>
                </ul>
                <input id="J_search" class="header-search" placeholder="工号/姓名/电话 按回车搜索"></input>
                <a id="J_add" class="header-add">添加</a>
                <a id="J_delete" class="delete-all">批量删除</a>
            </header>
            <nav class="content-nav">
                <div id="J_sex" class="nav-radio">
                    性别：
                    <label class="active">不限</label>
                    <label>男</label>
                    <label>女</label>
                </div>
                <div id="J_age" class="nav-radio">
                    年龄：
                    <label class="active">不限</label>
                    <label>18岁以下</label>
                    <label>18~25岁</label>
                    <label>25~35岁</label>
                    <label>35岁以上</label>
                </div>
                <div id="J_sort" class="nav-sort nav-radio">
                    排序：
                    <label class="active" data-sort = "asc">工号<i></i></label>
                    <label data-sort = "asc">姓名<i></i></label>
                    <label data-sort = "asc">年龄<i></i></label>
                </div>
            </nav>
            <section class="content-box">
                <div class="box-title">
                    <ul class="box-list myclear">
                        <li class="list-all list-li"><span data-bool="true" id="J_selectAll">√</span> 全选</li>
                        <li class="list-id list-li">工号</li>
                        <li class="list-name list-li">姓名</li>
                        <li class="list-sex list-li">性别</li>
                        <li class="list-age list-li">年龄</li>
                        <li class="list-birth list-li">生日</li>
                        <li class="list-phone list-li">电话</li>
                        <li class="list-address list-li">籍贯</li>
                        <li class="list-descript list-li">描述</li>
                        <li class="list-delete list-li">操作</li>
                    </ul>
                </div>
                <div id="J_Data" class="box-content"></div>
            </section>
            <div id="J_model" class="model-box">
                <div class="model-centent">
                    <h2 class="model-title"><span id="J_title">员工信息</span><span id="J_cancel">×</span></h2>
                    <hr>
                    <p class="model-id">
                        工号：<input type="text" disabled>
                    </p>
                    <p class="model-name">
                        姓名*：<input type="text" placeholder="请输入姓名">
                        <span></span>
                    </p>
                    <p class="model-sex">
                        性别：
                        <input type="radio" checked name="sex" id="nan" value="男"><label for="nan">男</label>
                        <input type="radio" name="sex" id="nv" value="女"><label for="nv">女</label>
                    </p>
                    <p class="model-age">
                        年龄*：<input type="text" disabled>
                    </p>
                    <p id="J_date" class="model-birth">
                        出生*：
                        <select id="J_year"></select>
                        年
                        <select id="J_month">
                            <option selected value="">--请选择--</option>
                        </select>
                        月
                        <select id="J_day">
                            <option selected value="">--请选择--</option>
                        </select>
                        日
                    </p>
                    <p class="model-phone">
                        手机号*：<input type="tel" placeholder="请输入手机号">
                        <span></span>
                    </p>
                    <p id="J_city" class="model-address">
                        籍贯：
                        <select id="J_province">
                        </select>
                        <select id="J_town">
                            <option selected value="">--请选择--</option>
                        </select>
                        <select id="J_disrict">
                            <option selected value="">--请选择--</option>
                        </select>
                    </p>
                    <p class="model-descript">
                        描述：<textarea cols="42" rows="8"></textarea>
                    </p>
                    <p class="model-btn">
                        <a href="#">重置</a>
                        <a href="#">提交</a>
                    </p>
                </div>
            </div>
            <div class="page-box myclear">
                <div id="J_prev" class="page-prev">上一页</div>
                <div id="J_page" class="page-num">
                </div>
                <div id="J_next" class="page-next">下一页</div>
            </div>
        </section>
    </div>

    <script src="js/dataBackground.js"></script>
    <script src="js/dataCity.js"></script>
    <script src="js/screenData.js"></script>
    <script src="js/deleteData.js"></script>
    <script src="js/addData.js"></script>
    <script src="js/updateData.js"></script>
    <script src="js/screenBtn.js"></script>
    <script src="js/renderer.js"></script>
    <script src="js/main.js"></script>
</body>
</html>